<template>
  <div>
    <div class="body">
      <div class="title">员工详情</div>
      <div class="action">
        <div>
          <a-input-search allow-clear placeholder="搜索姓名/手机号/身份证号" style="width: 225px" @search="inputChange" />
          <a-select allowClear placeholder="请选择渠道" @change="selectCheck" style="width: 225px;margin-left:20px">
            <a-select-option v-model="item.id" v-for="(item, index) in Channels" :key="index">
              {{ item.name }}
            </a-select-option>
          </a-select>
          <a-select allowClear placeholder="请选择人员状态" @change="selectCheck2" style="width: 225px;margin-left:20px">
            <a-select-option value="1">
              已报到
            </a-select-option>
            <a-select-option value="2">
              未报到
            </a-select-option>
          </a-select>
        </div>
        <a-button type="primary" @click="showAdd">
          <a-icon type="plus" />
          添加预登记人员
        </a-button>
      </div>
      <div class="tableBox">
        <a-table rowKey="id" :columns="columns" :data-source="dataList" :pagination="pagination" @change="handleTableChange">
          <a slot="status" slot-scope="text">
            <div
              style="text-align: center;width:50px;height: 20px;background: rgba(0, 0, 0, 0.04);border-radius: 2px;border: 1px solid rgba(0, 0, 0, 0.15);font-size: 11px;font-weight: 400;color: #767885;"
              v-if="text === 2"
            >
              未报到
            </div>
            <div
              style="text-align: center;width:50px;height: 20px;background: rgba(36, 205, 170, 0.1);border-radius: 2px;border: 1px solid #24cdaa;font-size: 11px;font-weight: 400;color: #24cdaa;"
              v-if="text === 1"
            >
              已报到
            </div>
          </a>
          <a slot="channelName" slot-scope="text">
            {{ text === undefined ? "" : text }}
          </a>
          <a slot="action" class="primary_color" slot-scope="text, record">
            <span class="primary" @click="induction(record)">
              入职
            </span>
            <a-divider type="vertical" />
            <span class="primary" @click="edit(record)">
              编辑
            </span>
          </a>
        </a-table>
      </div>
      <div class="drawerBox">
        <a-drawer :title="title" placement="right" :closable="false" :visible="visible" @close="onClose" width="450px">
          <a-form-model ref="ruleForm" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-form-model-item
              ref="name"
              label="姓名"
              prop="name"
              :rules="{
                required: true,
                message: '请输入'
              }"
            >
              <a-input v-model="form.name" placeholder="请输入" />
            </a-form-model-item>
            <a-form-model-item
              ref="phone"
              label="手机号码"
              prop="phone"
              :rules="{
                required: true,
                validator: validatorPhone
              }"
            >
              <a-input v-model="form.phone" placeholder="请输入" />
            </a-form-model-item>
            <a-form-model-item
              ref="idcard"
              label="身份证号"
              prop="idcard"
              :rules="{
                required: true,
                validator: validatorIdCard
              }"
            >
              <a-input v-model="form.idcard" placeholder="请输入" />
            </a-form-model-item>
            <a-form-model-item ref="channelId" label="渠道来源" prop="name">
              <a-select placeholder="请选择" @change="selectChange" v-model="form.channelId">
                <a-select-option v-model="item.id" v-for="(item, index) in Channels" :key="index">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item ref="status" label="人员状态" prop="status">
              <a-select placeholder="请选择" v-model="form.status">
                <a-select-option :value="1">
                  已报到
                </a-select-option>
                <a-select-option :value="2">
                  未报到
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-form-model>
          <div class="drawer-footer-box">
            <a-button v-if="title === '编辑'" style="margin-right:12px;color:#FA5051;border-color:#FA5051" @click="showDelete">
              删除
            </a-button>
            <a-button :style="{ marginRight: '12px' }" @click="onClose">
              取消
            </a-button>
            <a-button type="primary" html-type="submit" @click="handleAddOK">确定</a-button>
          </div>
        </a-drawer>
      </div>
      <a-modal title="删除预登记人员" :visible="deleteVisible" @ok="deleteOk" @cancel="deleteCancel">
        <div style="display: flex;justify-content: center">
          <a-icon type="question-circle" style="font-size:28px;color:#6A66F6" />
          <p style="font-size: 16px;font-weight: 500;color: #3c3d43;line-height: 20px;margin-left:20px">
            您确定要删除该预登记人员吗？一旦删除不可恢复
          </p>
        </div>
      </a-modal>
      <a-modal title="入职" :visible="inductionVisible" @ok="InductOk" @cancel="InductCancel">
        <div class="headerBox">
          <p class="titleName">{{ inductDetail.name }}</p>
          <div
            style="text-align: center;width:50px;height: 22px;background: rgba(0, 0, 0, 0.04);border-radius: 2px;border: 1px solid rgba(0, 0, 0, 0.15);font-size: 11px;font-weight: 400;color: #767885;margin-left:10px"
            v-if="inductDetail.status === 2"
          >
            未报到
          </div>
          <div
            style="text-align: center;width:50px;height: 22px;background: rgba(36, 205, 170, 0.1);border-radius: 2px;border: 1px solid #24cdaa;font-size: 11px;font-weight: 400;color: #24cdaa;margin-left:10px"
            v-if="inductDetail.status === 1"
          >
            已报到
          </div>
        </div>
        <div class="detailBox">
          <p class="detailTitle">联系电话</p>
          <p class="detailContent">{{ inductDetail.phone }}</p>
        </div>
        <div class="detailBox">
          <p class="detailTitle">身份证号</p>
          <p class="detailContent">{{ inductDetail.idcard }}</p>
        </div>
        <div class="detailBox">
          <p class="detailTitle">渠道来源</p>
          <p class="detailContent">{{ inductDetail.channelName }}</p>
        </div>
        <div class="detailBox" style="margin-top:10px;align-items: center;">
          <p class="detailTitle">用工单位</p>
          <p class="detailContent">
            <a-select allowClear placeholder="请选择用工单位" @change="unitChange" style="width: 215px">
              <a-select-option v-for="item in options" :key="item.id">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </p>
        </div>
      </a-modal>
    </div>
  </div>
</template>
<script>
const columns = [
  {
    title: "人员姓名",
    dataIndex: "name",
    key: "name",
    width: 100
  },
  {
    title: "联系电话",
    dataIndex: "phone",
    key: "phone",
    width: 120
  },
  {
    title: "身份证号",
    dataIndex: "idcard",
    key: "idcard",
    width: 120
  },
  {
    title: "渠道来源",
    dataIndex: "channelName",
    key: "channelName",
    width: 100,
    scopedSlots: { customRender: "channelName" }
  },
  {
    title: "人员状态",
    dataIndex: "status",
    key: "status",
    width: 100,
    scopedSlots: { customRender: "status" }
  },
  {
    title: "操作",
    dataIndex: "action",
    key: "action",
    scopedSlots: { customRender: "action" },
    align: "center",
    width: 100
  }
];
import { getPrePersonnel, getAllChannels, addPrePersonnel, editPrePersonnel, deletePrePersonnel } from "@/api/outsourcing/outsourcing";
export default {
  data() {
    const validatorPhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入手机号!"));
      } else {
        if (!/^1[3456789]\d{9}$/.test(value)) {
          callback(new Error("手机号格式不正确!"));
        } else {
          callback();
        }
      }
    };
    const validatorIdCard = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入身份证号!"));
      } else {
        if (!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
          callback(new Error("身份证号格式不正确!"));
        } else {
          callback();
        }
      }
    };
    return {
      validatorPhone,
      validatorIdCard,
      inductDetail: {},
      title: "添加预登记人员",
      visible: false,
      inductionVisible: false,
      channelName: null,
      dataList: [],
      Channels: [],
      columns,
      form: {},
      storyCompanyId: null,
      nameOrPhoneOrIdcard: null,
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      deleteVisible: false,
      status: null,
      channelId: null,
      pagination: {
        pageSize: 10,
        total: 0,
        size: "default",
        current: 1,
        showTotal: total => `共 ${total} 条`,
        showQuickJumper: true,
        showSizeChanger: true,
        personalPeriod: null,
        editCompanyName: null,
        ticketRecord: null,
        receivableRecord: null
      }
    };
  },
  computed: {
    options() {
      return this.$store.state.hr.companyList;
    }
  },
  created() {
    this.getAllChannelsList();
  },
  methods: {
    unitChange(e) {
      this.storyCompanyId = e;
    },
    selectCheck(e) {
      this.channelId = e;
      this.getPrePersonnelList();
    },
    selectCheck2(e) {
      this.status = e;
      this.getPrePersonnelList();
    },
    // 删除
    showDelete() {
      this.deleteVisible = true;
    },
    deleteOk() {
      deletePrePersonnel(this.form.id).then(res => {
        this.$notification["success"]({
          message: "success",
          description: "删除成功"
        });
        this.deleteVisible = false;
        this.visible = false;
        this.getAllChannelsList();
      });
    },
    deleteCancel() {
      this.deleteVisible = false;
    },
    // 入职
    induction(e) {
      this.inductionVisible = true;
      this.inductDetail = e;
      this.storyCompanyId = null;
    },
    InductOk() {
      if (this.storyCompanyId !== null) {
        this.inductionVisible = false;

        this.$store.dispatch("onCompanyClick", {
          id: this.storyCompanyId
        });
        this.$router.push({
          path: "/staff/employee",
          query: {
            outEmpDetail: JSON.stringify(this.inductDetail),
            EmpState: "out"
          }
        });
      } else {
        this.$message.error("请选择用工单位");
      }
    },
    InductCancel() {
      this.inductionVisible = false;
    },
    selectChange(e) {
      this.form.channelId = e;
    },
    // 编辑
    edit(e) {
      this.visible = true;
      this.title = "编辑";
      this.$nextTick(() => {
        this.$refs.ruleForm.clearValidate();
        this.form = JSON.parse(JSON.stringify(e));
      });
    },
    // 获取全部通道
    getAllChannelsList() {
      getAllChannels().then(res => {
        this.getPrePersonnelList();
        this.Channels = res.data;
      });
    },
    getPrePersonnelList() {
      getPrePersonnel({
        nameOrPhoneOrIdcard: this.nameOrPhoneOrIdcard ? this.nameOrPhoneOrIdcard : null,
        status: this.status ? this.status : null,
        channelId: this.channelId ? this.channelId : null,
        pageNo: this.pagination.current,
        pageSize: this.pagination.pageSize
      }).then(res => {
        this.$nextTick(() => {
          this.dataList = res.data.entities;
          this.Channels.forEach((item, index) => {
            this.dataList.forEach((item2, index2) => {
              if (item2.channelId === item.id) {
                this.dataList[index2].channelName = item.name;
              }
            });
          });
        });
      });
    },
    // 点击确定
    handleAddOK() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          if (this.title === "添加预登记人员") {
            addPrePersonnel(this.form).then(res => {
              this.$notification["success"]({
                message: "success",
                description: "添加成功"
              });
              this.visible = false;
              this.getPrePersonnelList();
            });
          }
          if (this.title === "编辑") {
            editPrePersonnel(this.form).then(res => {
              this.$notification["success"]({
                message: "success",
                description: "编辑成功"
              });
              this.visible = false;
              this.getPrePersonnelList();
            });
          }
        } else {
          return false;
        }
      });
    },
    // 控制新增编辑框
    showAdd() {
      this.visible = true;
      this.title = "添加预登记人员";
      this.$nextTick(() => {
        this.$refs.ruleForm.clearValidate();
        this.form = {};
      });
    },
    onClose() {
      this.visible = false;
    },
    // 搜索框
    inputChange(e) {
      this.nameOrPhoneOrIdcard = e;
      this.getPrePersonnelList();
    },
    // 分页器
    handleTableChange(pagination, filters, sorter) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.getAllChannelsList();
    }
  }
};
</script>

<style lang="scss" scoped>
.headerBox {
  display: flex;
  justify-content: center;
  // text-align: center;
  .titleName {
    font-size: 18px;
    font-weight: 500;
    color: #252525;
    line-height: 25px;
  }
}
.detailBox {
  display: flex;
  justify-content: center;
  .detailTitle {
    width: 90px;
    font-size: 14px;
    font-weight: 400;
    color: #767885;
  }
  .detailContent {
    width: 160px;
    font-size: 14px;
    font-weight: 500;
    color: #3c3d43;
  }
}
.body {
  padding: 24px;
  .title {
    font-size: 18px;
    font-weight: 400;
    color: #333333;
    padding-bottom: 24px;
  }
  .action {
    display: flex;
    justify-content: space-between;
  }
  .tableBox {
    margin-top: 24px;
  }
}
</style>
